<template>
    <div id="graph-canvas" @contextmenu.prevent="showContextMenu">
        <div id="graph-container"></div>
    </div>
    <addNode @node-select="nodeCreate" />
    <div id="right-menu"></div>
</template>

<script setup lang="ts">
import { GraphManager } from '@/utils/initGraph';
import addNode, { nodeListInterface } from './addNode.vue';
import { onMounted, ref } from 'vue';
import { addNodeDevice } from '@/utils/graphTing';
import tippy, { Instance } from 'tippy.js';
const graphManager = ref()
onMounted(() => {
    initPage()
})

const initPage = () => {
    graphManager.value = new GraphManager({ autosize: true })
}

/**
 * @description 节点创建
 */
const nodeCreate = (node: nodeListInterface) => {
    const inputPort = new Array(node.inputPortNumber || 1).fill('')
    const outPort = new Array(node.outputPortNumber || 1).fill('')
    addNodeDevice(inputPort, outPort, graphManager.value, node)
}

const tippyInstance = ref<Instance | null>(null);
const showContextMenu = (event: MouseEvent) => {
    tippy('#graph-canvas', {
        content: document.getElementById('right-menu'),
        allowHTML: true,
    });
};
</script>

<style scoped lang="scss">
#base-container {
    position: relative;
    display: flex;
}

#stencil-container {
    width: 300px;
    height: 100%;
}

#graph-container {
    height: 100% !important;
}

#right-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    z-index: 9999999999999;
}
</style>